<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>我的订单</title>
  <link rel="stylesheet" href="mobile/layui/css/layui.mobile.css">
  <link rel="stylesheet" href="mobile/layui/css/layui.css">
  <link rel="stylesheet" href="mobile/css/yj_css.css">
  <style>
      .styleNoOrder{width:220px;height:100%;margin: 0 auto;line-height: 400px}
      .fontStyle{font-size: 45.5px;color: #9F9F9F}
  </style>
</head>
<div>
  <header class="yj-header">
    <a href="javascript:history.go(-1)" class="yj-header-return layui-icon">&#xe603;</a>
    <span>我的订单</span>
    <a class="yj-header-meau"></a>
  </header>

  <div class="yj-content">
    <div class="yj-goods-attr-title yj-fixedTop-main">
      <a class="yj-active yj-tab1" onclick="tab('yj-goods-attr',1)"><span>待付款</span></a>
      <a class="yj-tab3" onclick="tab('yj-goods-attr',3)" id="IngOrderForm"><span>进行中</span></a>
      <a class="yj-tab2" onclick="tab('yj-goods-attr',2)" id="successOrderForm"><span>已完成</span></a>
    </div>

    <ul class="yj-order yj-mar-header">
      <div class="yj-goods-attr1 yj-none" id="oneTab">
      <!-- 待付款 -->

        <p class="yj-list-item yj-pad-lr yj-bgfff">订单编号:201803071412001<span class="yj-color-red yj-right">待付款</span></p>
      <!-- 待安装 -->
      <li class="yj-order-item yj-mar-t">
        <p class="yj-list-item yj-pad-lr yj-bgfff">车位编号:<span id="parkNumber"></span><span class="yj-color-red yj-right">待付款</span></p>
        <a class="yj-order-basicinfo yj-padding" href="order_detail.html">
          <span class="yj-goods-thumbnail"><img src="mobile/images/tu2.jpg" id="parkPic"></span>
          <div class="yj-confirm-goods-textinfo">
            <p class="yj-elip-2"><span id="parkAddress" >HP/惠普 P1106 黑白激光打印机家用标签A4打印机</span></p>
            <div class="yj-goods-price yj-clearfix">
              <span>¥&nbsp;<span id="parkPrice"></span></span>
            </div>

          </div>
        </a>
         <p class="yj-bgfff yj-text-right yj-list-item yj-pad-lr">
          <button class="yj-btn yj-btn-sm">取消订单</button>
          <button class="yj-btn yj-btn-sm yj-btn-line-main yj-mar-l" onclick="moveOrder_confirm()">立即付款</button>
        </p>
      </li>

      </div>
      <div class="yj-goods-attr2 yj-none" id="success">
          <div class="styleNoOrder">
              <p class="fontStyle">暂 无 订 单</p>
          </div>
      </div>
      <div class="yj-goods-attr3 yj-none" id="ing">
          <div class="styleNoOrder">
              <p class="fontStyle">暂 无 订 单</p>
          </div>
      </div>
    </ul>

  </div>
    <input type="hidden" id="hiddenCarParkId">
  <script th:src="@{/mobile/js/jquery.min.js}"></script>
  <script th:src="@{/mobile/layui/layui.js}"></script>
  <script src="mobile/js/jquery.min.js"></script>
  <script src="mobile/js/yj_js.js"></script>
  <script th:inline="javascript">
      var url = [[@{/}]];
        layui.use("layer", function () {
          var layer = layui.layer;
        })
  </script>

  <script>

      $(function () {
        tab('yj-goods-attr',1)
        payIng();
      })

    $(function () {
      $("#successOrderForm").click(function () {
        $.ajax({
          url:url+"orderForm/findAllOrderForm",
          success:function(result){
             var content = "";
             for(var i = 0;i<result.length;i++){
                var po = result[i];
                content +=
                           '<li class="yj-order-item yj-mar-t">'+
                           '         <p class="yj-list-item yj-pad-lr yj-bgfff">订单编号:'+po.oNumber+'</span></span><span class="yj-color-red yj-right">已完成</span></p>'+
                           '  <a class="yj-order-basicinfo yj-padding" href="order_detail.html?id='+po.oId+'">'+
                           '<span class="yj-goods-thumbnail"><img src='+po.carPark.cPic+'></span>'+
                           '<div class="yj-confirm-goods-textinfo">'+
                           '<p class="yj-elip-2">'+po.carPark.cAddress+'</p>'+
                            ' <div class="yj-goods-price yj-clearfix">'+
               '        <span>¥&nbsp;'+po.carPark.cPrice+'/小时</span>'+
               '                      </div>'+
               '                 <p class="yj-color-gray"><span id="voucherSum'+po.oId+'"></span></p>'+
               '             </div>'+
               '              </a>'+
               '             <p class="yj-text-right yj-pad-lr yj-list-item yj-border-b yj-bgfff">合计：&yen;'+po.oTotalmoney+'</p>'+
               '              </p>'+
               '             </li>   ';
             }
            $("#success").html(content);
            for (var j = 0;j<result.length;j++){

              var po = result[j];
              if (po.voucher ==null ){
                $("#voucherSum"+po.oId).html("未选择代金券");

              } else{
                $("#voucherSum"+po.oId).html("已选：代金券￥"+po.voucher.vSum);
              }
            } 
          }
        })
      })

    $("#IngOrderForm").click(function () {
        $.ajax({
          url:url+"orderForm/findIngOrderForm",
          success:function(result){
              if (result== ""){
                  return;
              }
              po = result[0];
              if (po == null){
                return;
              }
              var content =
                      '<li class="yj-order-item yj-mar-t">'+
                      '         <p class="yj-list-item yj-pad-lr yj-bgfff">订单编号:'+po.oNumber+'</span></span><span class="yj-color-red yj-right">进行中</span></p>'+
                      '  <a class="yj-order-basicinfo yj-padding" href="order_detail.html?id='+po.oId+'">'+
                      '<span class="yj-goods-thumbnail"><img src='+po.carPark.cPic+'></span>'+
                      '<div class="yj-confirm-goods-textinfo">'+
                      '<p class="yj-elip-2">'+po.carPark.cAddress+'</p>'+
                      ' <div class="yj-goods-price yj-clearfix">'+
                      '        <span>¥&nbsp;'+po.carPark.cPrice+'/小时</span>'+
                      '                      </div>'+
                      '                 <p class="yj-color-gray"><span id="voucherSum'+po.oId+'"></span></p>'+
                      '             </div>'+
                      '              </a>'+
                      '             <p class="yj-text-right yj-pad-lr yj-list-item yj-border-b yj-bgfff">合计：&yen;'+po.oTotalmoney+'</p>'+
                      '              </p>'+
                      '             </li>   ';
            $("#ing").html(content);
            if (po.voucher ==null ){
              $("#voucherSum"+po.oId).html("未选择代金券");
            } else{

              $("#voucherSum"+po.oId).html("已选：代金券￥"+po.voucher.vSum);
            }
          }
        })
     })
    })

  function payIng(){
       $.ajax({
         url:"orderForm/payIng",
         success:function (result) {
           if (result.code ==500){
               $("#oneTab").html("  <p class=\"yj-list-item yj-pad-lr yj-bgfff\"><span class=\"yj-color-red yj-right\">占位格</span></p>" +
                   "<div class=\"styleNoOrder\">\n" +
                   "              <p class=\"fontStyle\">暂 无 订 单</p>\n" +
                   "          </div>");
               return;
           }
           $("#parkNumber").html(result.result.cNumber);
           $("#parkPrice").html(result.result.cPrice);
           $("#parkAddress").html(result.result.cAddress);
           $("#parkPic").attr("src",result.result.cPic);

           $("#hiddenCarParkId").val(result.result.id);
         }
       })
    }

   function moveOrder_confirm() {
       var id = $("#hiddenCarParkId").val();
       location.href="order_confirm.html?id="+id;
   }
  </script>
  </div>
</body>
</html>